// 定义GridPostList组件的props类型
import PostStats from "@/components/shared/Card/PostStats.tsx";
import {Link} from "react-router-dom";
import {useUserContext} from "@/context/AuthContext.tsx";
import {Models} from "appwrite";

type GridPostListProps = {
    posts: Models.Document[];
    showUser?: boolean;
    showStats?: boolean;
};

// 定义GridPostList组件
const GridPostList = ({
                          posts,
                          showUser = true,
                          showStats = true,
                      }: GridPostListProps) => {
    // 从AuthContext中获取用户信息
    const { user } = useUserContext();

    return (
        <ul className="grid-container">
            {posts.map((post) => (
                <li key={post.$id} className="relative min-w-80 h-80">
                    <Link to={`/posts/${post.$id}`} className="grid-post_link">
                        <img
                            src={post.imageUrl}
                            alt="post"
                            className="h-full w-full object-cover"
                        />
                    </Link>

                    <div className="grid-post_user">
                        {showUser && (
                            <div className="flex items-center justify-start gap-2 flex-1">
                                <img
                                    src={
                                        post.creator.imageUrl ||
                                        '/assets/icons/profile-placeholder.svg'
                                    }
                                    alt="creator"
                                    className="w-8 h-8 rounded-full"
                                />
                                <p className="line-clamp-1">{post.creator.name}</p>
                            </div>
                        )}
                        {showStats && <PostStats post={post} userId={user.id} />}
                    </div>
                </li>
            ))}
        </ul>
    );
};

export default GridPostList;